<template>
    <view class="elevatorList">
        <view class="header_box">
            <view class="header_item" v-if="type != 4">
                <view class="activeText" v-if="type != 5">{{ typeNameobj[type] }}</view>
                <view class="activeText" v-else>{{ typeNameobj[type][compliance - 2] }}</view>
            </view>
            <view v-else class="header_item statusList">
                <view :class="{ activeText: headIdx == 0 }" @click="changeHead(0)">按电梯年审类型
                </view>
                <view :class="{ activeText: headIdx == 1 }" @click="changeHead(1)">按合同到期情况
                </view>
            </view>
            <view v-if='type == 4' class="header_item paddingB">
                <view :class="['status_item', item.val == statusActive ? 'active' : '']"
                    v-for="(item, index) in statusList" :key="index" @click="chooseStatus(item)">{{ item.name }}</view>
            </view>
        </view>
        <view class="totalList">
            <view class="total_item">
                共<text>{{ buildingTotal }}</text>个项目
            </view>
            <view class="total_item">
                (<text>{{ elevatorTotal }}</text>台电梯)
            </view>
        </view>
        <scroll-view class="scrollBody" scroll-y="true" @scrolltolower="scrolltolower">
            <view class="content">
                <view class="list" v-if="list.length">
                    <list-card v-for="(item, index) in list" :key="index" :newCard="true" :type="type"
                        :msg="item"></list-card>
                </view>
                <default-block v-else-if="!loading"></default-block>
            </view>
        </scroll-view>
    </view>
</template>
<script>
import listCard from './repair/components/listCard.vue';
import defaultBlock from '../components/default/default.vue';
import { getElevatorPage } from '@/apis/statistic.js';
export default {
	components: {
		listCard,
		defaultBlock
	},
	data() {
		return {
			typeNameobj: {
				'1': '未设置责任组',
				'2': '未设置责任人',
				'3': '从未排期电梯',
				'5': ['明天即将违规', '已违规'],
				'6': '暂停维保梯未清除剩余排期'
			},
			type: '',
			list: [],
			buildingTotal: 0,
			elevatorTotal: 0,
			statusList: [
				{ name: '全部', val: 'all' },
				{ name: '年审梯', val: '0' },
				{ name: '非年审梯', val: '1' },
			],
			statusActive: 'all',
			// windowHeight: 0,
			// safeAreaBottom: 0,
			page: {
				size: 10,
				current: 1,
			},
			isLoadMore: false,
			useType: '0',
			headIdx: '0',
			deptName: '',
			compliance: '2',
			loading: false,
		};
	},
	onLoad(e) {
		uni.getSystemInfo({
			success: (res) => {
				console.log(res);
				// this.windowHeight = res.windowHeight;
				// this.safeAreaBottom = res.screenHeight - res.safeArea.bottom;
			},
		});
		this.type = e.type;
		if (e.deepIdx) {
			this.changeHead(e.deepIdx);
		}
		if (e.compliance) {
			this.compliance = e.compliance;
			this.deptName = e.deptName;
		}
		this.getList();
	},
	methods: {
		changeHead(idx) {
			this.headIdx = idx;
			this.statusActive = 'all';
			this.page.current = 1;
			this.list = [];
			if (idx == 0) {
				this.statusList = [
					{ name: '全部', val: 'all' },
					{ name: '年审梯', val: '0' },
					{ name: '非年审梯', val: '1' },
				];
			} else {
				this.statusList = [
					{ name: '全部', val: 'all' },
					{ name: '在保(合同期内)', val: '2' },
					{ name: '非在保(拟定保养)', val: '4' },
					{ name: '脱保(下份合同待生效)', val: '7' },
					{ name: '脱保(合同终止)', val: '5 ' },
					{ name: '脱保(合同到期)', val: '6 ' },
					// { name: '在保(合同期外)', val: '3' },
				];
			}
			this.getList();
		},
		chooseStatus(item) {
			this.statusActive = item.val;
			this.page.current = 1;
			this.list = [];
			this.getList();
		},
		getList() {
			this.loading = true;
			uni.showLoading({
				icon: 'none',
				title: '加载中',
				mask: true,
			});
			let obj = {
				temp: this.type,
				...this.page,
			};
			if (this.type == 4 && this.headIdx == 0 && this.statusActive != 'all') {
				obj.useType = this.statusActive;
			}
			if (this.type == 4 && this.headIdx == 1 && this.statusActive != 'all') {
				obj.maintainStatus = this.statusActive;
			}
			if (this.type == 5 && this.compliance) {
				obj.compliance = this.compliance;
				obj.deptName = this.deptName;
			}
			getElevatorPage(obj).then((res) => {
				if (res) {
					this.buildingTotal = res.data.buildingCount;
					this.elevatorTotal = res.data.elevatorCount;
					this.list = this.list.concat(res.data.page.records);
					if (res.data.page.records.length < this.page.size) {
						this.isLoadMore = true;
					} else {
						this.isLoadMore = false;
					}
				} else {
					uni.showToast({ title: '请求失败', icon: 'none' });
					this.isLoadMore = false;
					if (this.page.current > 1) {
						this.page.current -= 1;
					}
				}
				this.loading = false;
				uni.hideLoading();
			});
		},
		scrolltolower() {
			if (!this.isLoadMore) {
				this.isLoadMore = true;
				if (this.list.length < this.buildingTotal) {
					this.page.current++;
					this.getList();
				}
			}
		}
	}
};
</script>
<style lang="scss" scoped>
.elevatorList {
    display: flex;
    flex-direction: column;
    height: 100vh;
}

.header_box {
    //border-bottom: 2rpx solid #eee;
    .header_item {
        padding: 16rpx 20rpx;
        display: flex;
        padding-bottom: 0;
        font-size: 26rpx;
        color: #93B1C7;
        white-space: nowrap;
        overflow-x: auto;
        border-bottom: 2rpx solid #eee;
    }

    .statusList {
        justify-content: space-around;

        >view {
            padding-top: 8rpx;
        }
    }

    .paddingB {
        padding-bottom: 16rpx;
    }

    .header_middle,
    .header_top {
        justify-content: space-between;
        align-items: center;

        .left {
            font-size: 32rpx;
            color: #333;
            font-weight: 500;
            border-left: 4rpx solid #0091ff;
            padding-left: 16rpx;
        }

        .right {
            color: #0091ff;
            font-weight: 400;
            font-size: 24rpx;
            display: flex;
            align-items: center;

            image {
                width: 32rpx;
                height: 32rpx;
                margin-top: 6rpx;
                margin-right: 4rpx;
            }
        }

        .dateLabel {
            display: flex;
            flex: 1;
            font-size: 26rpx;
            color: #666;
        }

        .dateContent {
            width: 568rpx;
            height: 48rpx;
            background: #f3f6f8;
            border-radius: 8rpx;
            font-size: 24rpx;
            color: #333;
            display: flex;
            align-items: center;
            justify-content: center;

            .dateStr {
                display: flex;
                flex: 1;
                justify-content: center;
            }

            .right {
                display: flex;
                width: 32rpx;
                padding-right: 8rpx;
                justify-content: flex-end;
            }
        }
    }

    .status_item {
        padding: 6rpx 20rpx;
        background: #f3f6f8;
        border-radius: 22rpx;
        color: #666;
        font-size: 26rpx;
        margin-right: 16rpx;
    }

    .active {
        color: #0091ff;
        background: #dcf0ff;
    }

    .activeText {
        color: #0091ff;
        font-size: 30rpx;
        font-weight: 500;
        padding-bottom: 16rpx;
        border-bottom: 4rpx solid #0091ff;
    }
}

.totalList {
    display: flex;
    padding: 16rpx 20rpx;
    background: #f3f6f8;

    .total_item {
        height: 34rpx;
        font-size: 24rpx;
        color: #999;
        position: relative;
        padding-right: 20rpx;
        align-items: center;

        .line {
            position: absolute;
            right: 10rpx;
            top: 6rpx;
            width: 2rpx;
            height: 24rpx;
            background: #cccccc;
        }
    }

    text {
        color: #0091ff;
    }
}

.scrollBody {
    background: #f3f6f8;
    flex: 1 1 0%;
    min-height: 0;
}

.content {
    padding: 0 20rpx;
    background: #f3f6f8;
    padding-bottom: 20rpx;
}
</style>